<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-input
          v-model="filter.company"
          placeholder="实习单位"
          style="width: 160px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-button 
          type="primary" 
          style="margin-left: 15px; border-radius: 4px"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i> 搜索
        </el-button>
        <el-button 
          type="primary" 
          style="margin-left: 10px; border-radius: 4px"
          @click="resetSearch"
        >
          <i class="el-icon-refresh"></i> 重置
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        stripe
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120" align="center"/>
        <el-table-column prop="end_time" label="结束时间" width="120" align="center"/>
        <el-table-column prop="company" label="实习单位名称" width="180"/>
        <el-table-column prop="company_info" label="实习单位简介" width="180" show-overflow-tooltip/>
        <el-table-column prop="weekly_score" label="周班成绩" width="120" align="center"/>
        <el-table-column prop="total_score" label="总成绩" width="120" align="center"/>
        <el-table-column label="最终成绩" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              :type="getScoreTagType(scope.row.final_score)"
              effect="dark"
            >
              {{ scope.row.final_score }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="custom-pagination">
        <span class="pagination-text">第1 到 {{ filteredData.length }} 条，共 {{ filteredData.length }} 条记录。</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        name: '',
        company: ''
      },
      tableData: [
        {
          id: 3,
          name: '生产实习',
          start_time: '2022-01-02',
          end_time: '2022-02-28',
          company: '华为',
          company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市。',
          weekly_score: 21,
          total_score: 100,
          final_score: '及格'
        },
        {
          id: 4,
          name: '软件开发实习',
          start_time: '2022-03-01',
          end_time: '2022-05-31',
          company: '阿里巴巴',
          company_info: '阿里巴巴集团控股有限公司是中国的跨国科技公司，提供电子商务、零售互联网、科技和金融服务。',
          weekly_score: 25,
          total_score: 95,
          final_score: '良好'
        },
        {
          id: 5,
          name: '市场营销实习',
          start_time: '2022-06-01',
          end_time: '2022-08-31',
          company: '腾讯',
          company_info: '腾讯控股有限公司是一家中国跨国企业集团和控股公司，其子公司专门从事各种与互联网相关的服务和产品。',
          weekly_score: 30,
          total_score: 90,
          final_score: '优秀'
        }
      ]
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.id === '' || item.id.toString().includes(this.filter.id)) &&
          (this.filter.name === '' || item.name.includes(this.filter.name)) &&
          (this.filter.company === '' || item.company.includes(this.filter.company))
        )
      })
    }
  },
  methods: {
    // 搜索功能
    handleSearch() {
      // 计算属性会自动更新
      this.$message({
        message: '搜索完成',
        type: 'success',
        duration: 1000
      })
    },
    
    // 重置搜索条件
    resetSearch() {
      this.filter = {
        id: '',
        name: '',
        company: ''
      }
      this.$message({
        message: '已重置搜索条件',
        type: 'info',
        duration: 1000
      })
    },
    
    // 根据成绩获取标签类型
    getScoreTagType(score) {
      switch(score) {
        case '优秀': return 'success'
        case '良好': return 'primary'
        case '及格': return 'warning'
        default: return 'info'
      }
    }
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-item {
  margin-left: 10px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #606266;
}

.custom-pagination {
  margin-top: 20px;
  text-align: right;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-text {
  color: #909399;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.el-tag {
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  font-size: 13px;
  font-weight: bold;
}

.el-button [class*="el-icon-"] {
  margin-right: 5px;
}
</style>